<template>
	<el-aside width="200px">
		<!-- :default-active="this.$route.path" -->
		<el-menu
			:collapse="false"
			class="el-menu-vertical-demo"
			@open="handleOpen"
			@close="handleClose"
			@select="selectMenu"
			background-color="#d3dce6"
			text-color="#112e49"
			active-text-color="#575258"
			unique-opened
			router
			ref="menu"
		>
			<el-menu-item :index="item.path" v-for="item in noChildren()" :key="item.path">
				<!-- <el-icon><icon-menu></icon-menu></el-icon> -->
				<template
					><component class="icons" :is="item.icon"></component> <span>{{ item.lable }}</span></template
				>
			</el-menu-item>
			<el-sub-menu :index="item.lable" v-for="item in hasChildren()" :key="item.path">
				<component class="icons" :is="item.icon"></component>
				<span>{{ item.lable }}</span>
				<!-- <el-menu-item index="1-4-1">选项1</el-menu-item> -->
				<el-menu-item-group>
					<!-- <template slot="title">分组一</template> -->
					<el-menu-item :index="subItem.path" v-for="(subItem, subIndex) in item.children" :key="subIndex"
						><component class="icons" :is="subItem.icon"></component>
						<span>{{ subItem.lable }}</span></el-menu-item
					>
				</el-menu-item-group>
			</el-sub-menu>
		</el-menu>
	</el-aside>
	<!-- <el-row class="tac">
		<el-col>
			
				:default-active="this.$route.path" ---- 当前路由为默认选中
				也可采用 selectMenu 函数渲染选中
			-->
	<!-- <el-menu
				:default-active="this.$route.path"
				:collapse="this.$VuexStore.state.collapse"
				@open="handleOpen"
				@close="handleClose"
				@select="selectMenu"
				background-color="#d3dce6"
				text-color="#112e49"
				active-text-color="#575258"
				unique-opened
				router
				ref="menu"
			>
				<template v-for="item in menus">
					<template v-if="item.subItems && item.subItems.length > 0">
						<el-submenu :index="item.path" :key="item.index">
							<template slot="title">
								<i :class="item.icon"></i>
								<span slot="title">{{ item.title }}</span>
							</template>
							<el-menu-item
								class="vue-sideMenu"
								v-for="(subItem, i) in item.subItems"
								:index="subItem.path"
								:key="i"
							>
								{{ subItem.title }}
							</el-menu-item>
						</el-submenu>
					</template>
					<template v-else>
						<el-menu-item class="vue-sideMenu" :index="item.path" :key="item.index">
							<i :class="item.icon"></i>
							<span slot="title">{{ item.title }}</span>
						</el-menu-item>
					</template>
				</template>
			</el-menu>
		</el-col>
	</el-row> -->
</template>
<script>
export default {
	// name: "SideBar",
	setup() {
		const list = [
			{
				lable: "系统首页",
				path: "/index",
				icon: "user",
			},
			// {
			// 	lable: "账户模块",
			// 	path: "/account",
			// 	icon: "setting",
			// 	children: [
			// 		{
			// 			lable: "个人主页",
			// 			path: "/account/profile",
			// 			icon: "setting",
			// 		},
			// 		{
			// 			lable: "用户列表",
			// 			path: "/account/users",
			// 			icon: "setting",
			// 		},
			// 	],
			// },
			// {
			// 	lable: "公共模块",
			// 	path: "/common",
			// 	icon: "el-icon-c-scale-to-original",
			// 	children: [
			// 		{
			// 			lable: "图片列表",
			// 			path: "/common/images",
			// 		},
			// 		{
			// 			lable: "评论列表",
			// 			path: "/common/comments",
			// 		},
			// 	],
			// },
			{
				lable: "音乐模块",
				path: "/iting",
				icon: "play",
				children: [
					{
						lable: "音频列表",
						path: "/iting/audios",
					},
					{
						lable: "歌手列表",
						path: "/iting/singers",
					},
				],
			},
			{
				lable: "测试模块",
				path: "/test",
				icon: "flag",
				children: [
					{
						lable: "你好世界1",
						path: "/test/helloWorld1",
					},
					{
						lable: "你好世界2",
						path: "/test/helloWorld2",
					},
				],
			},
		];
		const noChildren = () => {
			return list.filter((item) => !item.children);
		};
		const hasChildren = () => {
			return list.filter((item) => item.children);
		};
		return {
			noChildren,
			hasChildren,
		};
	},
	// props: {
	// 	menus: { type: Array },
	// },
	methods: {
		// 展开菜单
		handleOpen: function (key, keyPath) {
			console.log(key, keyPath);
		},
		// 关闭菜单
		handleClose: function (key, keyPath) {
			console.log(key, keyPath);
		},
		// 选择菜单
		selectMenu: function (index, indexPath) {
			// 设置选中
			this.$refs.menu.activeIndex = index;
		},
	},
};
</script>

<style scoped>
.el-sub-menu {
	height: 20px;
	border: none;
}
/** 只设置左边菜单选中样式，不影响头部菜单 */
.vue-sideMenu.is-active {
	border-right: 3px solid #459f75;
	background-color: #9eaaad !important;
}
/** 覆盖掉 app 样式，设置靠左对齐 */
.el-menu-item {
	text-align: left;
	height: 100px;
}
.el-sub-menu {
	text-align: left;
	height: 100px;
}
</style>
